<template>
    <div class="top">
        <van-list
        class="boxaaa"
        v-model:loading="loading"
        :finished="finished" 
        @load="getListHandler"
        finished-text="没有更多了">
            <div class="aaaaaaa" v-for="item in goodeLista" :key='item.proid' title="时间">
            <img :src="item.img1">
            <p class="title">{{ item.proname }}</p>
            <p class="price">￥{{ item.originprice }}</p>
            <p class="plxs">
                <span class="aaa">{{item.discount}}条评论</span>
                <span class="bbb">看相似</span>
            </p>
            </div>
        </van-list>
    </div>
</template>
<script  name="jdPubuliu" lang="ts" setup>
import {getYList} from '../../../mode/goods'
import { onMounted,ref } from 'vue';
interface PubuliuInfo {
    img1?: string
    proid?: string
    proname?: string
    originprice?: number
    discount?: number
    flag?: boolean
}

interface Respose {
    code: string
    data: Array<PubuliuInfo>
}
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const goodeLista = ref<Array<PubuliuInfo>>([])
const pagen = ref<number>(1)
const getListHandler = async()=>{
    const res = await getYList(pagen.value)
    if ((res as unknown as Respose).code !== '200') return
    goodeLista.value.push( ...res.data)
    if(res.data.length < 10)finished.value = true

    pagen.value++

    loading.value=false
}

onMounted( () => {
    
    getListHandler()
    

})
</script>
<style scoped lang="scss">
.top{
    margin-top: 10px;
}
.boxaaa{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.aaaaaaa{
    width: 45%;
    margin: 0 0 10px 0;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    >img{
        width: 100%;
        height: 160px;
        display: block;
    }
    >.title{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        margin: 5px 0 0 5px;
    }
    >.price{
        font-size: 16px;
        color: red;
        margin: 5px 0 0 5px;
    }
    >.plxs{
        display: flex;
        justify-content: space-between;
        margin: 5px 5px 5px 5px;
        >.aaa{
            font-size: 12px;
            color: rgb(197, 197, 197);
        }
        >.bbb{
            font-size: 14px;
            color: black;
            width: 60px;
            height: 20px;
            background-color: rgb(197, 197, 197);
            text-align: center;
            border-radius: 20px;
        }
    }
}
</style>